<template>
  <div class="subpage ear-detail-container">
      <ul class="ear-detail-top">
          <li>
              <div class="ear-detail-top-left">
                  <img src="@/assets/img/home_img25.png" alt="">
                  <span>耳标号</span>
              </div>
              <span>ID{{item.cattleIdCard}}</span>
          </li>
		  <li>
		      <div class="ear-detail-top-left">
		          <img src="@/assets/img/home_img26.png" alt="">
		          <span>月龄</span>
		      </div>
		      <span>{{item.ageMonth}}月</span>
		  </li>
      </ul>
	 <div class="bg"></div>
	  <div class="ear-detail-bottom">
	      <div v-if="item.recordCount !== null">
			  <p class="resale-title">转售记录</p>
			  <ul class="resale-list">
			      <li>
			          <span>转售记录</span>
			          <span>{{item.recordCount}}次</span>
			      </li>
			      <li>
			          <span>转售时间</span>
			          <span>{{item.resaleTime}}</span>
			      </li>
			      <li>
			          <span>整牛单价</span>
			          <span>{{item.totalPrice}}{{item.totalPriceUnit}}</span>
			      </li>
			  </ul>
		  </div>
	      <div class="resale-img">
	          <img :src="item.pic" alt="">
	      </div>
	  </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
			item: {}
        }
    },
    created() {
		this.getData()
    },
	methods: {
		//   查询转售里面牛详情页
		getData(){
			this.$api.get('/api/product/cattle_detail/' + this.$route.params.orderId)
			.then(({data})=>{
				this.item = data;
			})
		},
	}
}
</script>

<style lang="scss" scoped>
	.bg{
		width: 100%;
		height: 10px;
		background-color: #f8f8f8;
	}
    .ear-detail-container {
       background-color: #fff;
        .ear-detail-top {
            width: 100%;
            padding: 0 24px;
            box-sizing: border-box;
            background-color: #fff;
			margin-bottom: 10px;
            li {
                width: 100%;
                padding: 12px 0;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 16px;
                color: #344047;
                &:first-child {
                    border-bottom: 1px solid #f2f2f2;
                }
                .ear-detail-top-left {
                    display: flex;
                    align-items: center;
                    img {
                        width: 36px;
                        height: 36px;
                        object-fit: cover;
                        margin-right: 20px;
                    }
                }
            }
        }
        .empty-div {
            width: 100%;
            height: 10px;
            background-color: #f8f8f8;
        }
        .ear-detail-bottom {
            width: 100%;
            padding: 16px 24px 0;
            box-sizing: border-box;
            background-color: #fff;
            .resale-title {
                padding-bottom: 6px;
                font-size: 16px;
                color: #344047;
            }
            .resale-list {
                width: 100%;
                li {
                    width: 100%;
                    padding: 16px 0;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    border-bottom: 1px solid #f2f2f2;
                    span {
                        &:first-child {
                            display: block;
                            width: 88px;
                        }
                        &:last-child {
                            flex: 1;
                        }
                    }
                }
            }
        }
        .resale-img {
            width: 100%;
            padding: 16px 0;
            box-sizing: border-box;
			
            img {
                width: 100%;
                height: 245px;
                object-fit: cover;
				border-radius: 10px;
            }
        }
    }
</style>